<html>
<head>
<meta charset="utf-8"> 
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<select id="select" dir="rtl">
    <option>Same ببببب</option>
    <optgroup label="group">
        <option>Same ببببب</option>
    </optgroup>
</select>

<script>
function test() {
    if (!window.internals)
        return;

    description('Tests fix for regression <a href="http://crbug.com/395613">crbug.com/395613</a>. Checks that option in optgroup is styled properly.');

    popup = document.getElementById('select');
    popup.focus();
    eventSender.keyDown(' ', null);
    shouldBeTrue('internals.isSelectPopupVisible(popup)');
    shouldBeTrue('internals.selectPopupItemStyleIsRtl(popup, 2)');
    popup.blur();
    shouldBeFalse('internals.isSelectPopupVisible(popup)');
    popup.style.fontSize = '50px';
    popup.focus();
    eventSender.keyDown(' ', null);
    shouldBeTrue('internals.isSelectPopupVisible(popup)');
    shouldBeGreaterThan('internals.selectPopupItemStyleFontHeight(popup, 2)', '50');
}
test();
</script>
</body>
</html>
